<template>
  <div class="whole">
    <div class="crumbs">
      <a-breadcrumb>
        <a-breadcrumb-item v-for="(item, index) in $route.matched" :key="index">
          <span v-if="index+1 < $route.matched.length">{{ item.meta.title }}</span>
          <router-link v-if="index+1 == $route.matched.length" :to="item.path">{{ item.meta.title }}</router-link>
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="addThirdUse">
      <a-button v-if="addShow" :class="butAdmin" class="userAbut" type="primary" @click="addThirdUse">+ 添加应用</a-button>
    </div>
    <a-table
        :class="TableAdmin"
        :columns="columns"
        :data-source="data1"
        :pagination="pagination"
        class="thirdUseTable"
        rowKey="id"
    >
      <span slot="icon" slot-scope="text, record">
        <img :src="imgUrl+record.icon" style="width:50px;heigth:50px"/>
      </span>
      <span slot="num" slot-scope="text, record, index">
        {{
          (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1
        }}
      </span>
      <template slot="operations" slot-scope="text, record">
        <div class="editable-row-operations">
          <span v-if="delShow">
            <a-popconfirm v-if="data1.length" title="确认删除?" @confirm="() => Delete(record.id)">
              <a href="javascript:;" title="删除">
                <a-icon style="color:red; fontSize:16px;" type="delete"/>
              </a>
            </a-popconfirm>
          </span>
          <span class="jiange"></span>
          <span v-if="editShow">
            <a href="javascript:;" title="编辑" @click="edit(record.id)">
              <a-icon style="color:#7a7d7e; fontSize:16px;" type="edit"/>
            </a>
          </span>
        </div>
      </template>
      <span slot="num" slot-scope="text, record, index">
        {{
          (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1
        }}
      </span>
    </a-table>
    <div v-show="Loading" class="Loading">
      <a-spin tip="Loading..."></a-spin>
    </div>
    <!-- 添加 -->
    <div ref="aModalThirdUse" class="aModalThirdUse">
      <a-modal
          v-model="addVisible"
          :getContainer="()=>$refs.aModalThirdUse"
          :mask="false"
          :maskClosable="false"
          centered
          title="添加第三方应用"
      >
        <template slot="footer">
          <a-button :class="TableButSave" class="butSave" @click="closeAddThirdUse">添加</a-button>
          <a-button :class="TableButReset" class="butReset" @click="addReturnReset">重置</a-button>
        </template>

        <a-form :form="form" class="addForm" hideRequiredMark>
          <a-form-item v-bind="formItemLayout">
            <a-upload
                :before-upload="beforeUpload"
                :customRequest="uploadImage"
                :show-upload-list="false"
                accept="image/jpeg, image/jpg, image/png"
                class="avatar-uploader"
                list-type="picture-card"
                name="icon"
            >
              <img v-if="icon" :src="imgUrl+icon" alt="avatar" style="width:150px;height:150px"/>
              <div v-else class="uploadimage">
                <img alt src="../../../images/SystemLayout/uploadImg.png"/>
                <div class="ant-upload-text" style="font-size: 16px;color: #A3A3A3;">上传应用图片</div>
              </div>
            </a-upload>
          </a-form-item>

          <a-form-item class="aFormItem" label="应用名称" v-bind="formItemLayout">
            <a-input
                v-decorator="[
            'name',
            {
              rules: [
                {
                  required: true,
                  message: '请输入应用名称',
                },
              ],
            },
          ]"
            />
          </a-form-item>

          <a-form-item class="aFormItem" label="排序码" v-bind="formItemLayout">
            <a-input
                v-decorator="[
            'sortCode',
            {
              rules: [
                {
                  required: true,
                  message: '请输入排序码',
                },
                {
                  pattern: new RegExp(/^[0-9]\d*$/, 'g'),
                  message: '请输入数字类型'
                }
              ],
            },
          ]"
            />
          </a-form-item>

          <a-form-item class="aFormItem" label="链接地址" v-bind="formItemLayout">
            <a-input
                v-decorator="[
            'path',
            {
              rules: [
                {
                  required: true,
                  message: '请输入链接地址',
                },
              ],
            },
          ]"
            />
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
    <!-- 编辑 -->
    <div ref="aModalThirdUse1" class="aModalThirdUse1">
      <a-modal
          v-model="editVisible"
          :getContainer="()=>$refs.aModalThirdUse1"
          :mask="false"
          :maskClosable="false"
          centered
          title="编辑第三方应用"
      >
        <template slot="footer">
          <a-button :class="TableButSave" class="butSave" @click="closeEditThirdUse">提交</a-button>
          <a-button :class="TableButReset" class="butReset" @click="addReturnReset">重置</a-button>
        </template>

        <a-form :form="form" class="addForm" hideRequiredMark>
          <a-form-item v-bind="formItemLayout">
            <a-upload
                :before-upload="beforeUpload"
                :customRequest="uploadImage"
                :show-upload-list="false"
                accept="image/jpeg, image/jpg, image/png"
                class="avatar-uploader"
                list-type="picture-card"
                name="icon"
            >
              <img v-if="icon" :src="imgUrl+icon" alt="avatar" style="width:150px;height:150px"/>
              <div v-else class="uploadimage">
                <img alt src="../../../images/SystemLayout/uploadImg.png"/>
                <div class="ant-upload-text" style="font-size: 16px;color: #A3A3A3;">上传应用图片</div>
              </div>
            </a-upload>
          </a-form-item>

          <a-form-item class="aFormItem" label="应用名称" v-bind="formItemLayout">
            <a-input
                v-decorator="[
            'name',
            {
              rules: [
                {
                  required: true,
                  message: '请输入应用名称',
                },
              ],
            },
          ]"
            />
          </a-form-item>

          <a-form-item class="aFormItem" label="排序码" v-bind="formItemLayout">
            <a-input
                v-decorator="[
            'sortCode',
            {
              rules: [
                {
                  required: true,
                  message: '请输入排序码',
                },
              ],
            },
          ]"
            />
          </a-form-item>

          <a-form-item class="aFormItem" label="链接地址" v-bind="formItemLayout">
            <a-input
                v-decorator="[
            'path',
            {
              rules: [
                {
                  required: true,
                  message: '请输入链接地址',
                },
              ],
            },
          ]"
            />
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </div>
</template>

<script>
import api from "../../api/thirdUse/thirdUse.js";
import uploadApi from "../../api/uploadImage/uploadImage.js";
import moment from "moment";

export default {
  data() {
    return {
      Loading: false,
      columns: [
        {
          title: "序号",
          dataIndex: "index",
          key: "index",
          scopedSlots: {customRender: "num"},
          width: 78
        },
        {
          title: "应用图标",
          dataIndex: "icon",
          scopedSlots: {customRender: "icon"},
          width: 100
        },
        {
          title: "应用名称",
          dataIndex: "name",
          scopedSlots: {customRender: "name"},
          width: 150
        },
        {
          title: "链接地址",
          dataIndex: "path",
          scopedSlots: {customRender: "path"},
          width: 200
        },
        {
          title: "排序码",
          dataIndex: "sortCode",
          scopedSlots: {customRender: "sortCode"},
          width: 78
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          scopedSlots: {customRender: "createTime"},
          customRender: (text, row, index) => {
            return moment(text).format("YYYY-MM-DD HH:mm:ss");
          },
          width: 100
        },
        {
          title: "操作",
          dataIndex: "operations",
          scopedSlots: {customRender: "operations"},
          width: 78
        }
      ],
      data1: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        pageSizeOptions: ["5", "10", "15", "20"],
        onShowSizeChange: current => this.onSizeChange(current),
        onChange: (current, pageSize) => this.onPageChange(current, pageSize)
      },
      addShow: false,
      delShow: false,
      editShow: false,

      imgUrl: "/profile",
      loading: false,
      icon: "",
      formItemLayout: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 8}
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16}
        }
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0
          },
          sm: {
            span: 16,
            offset: 8
          }
        }
      },
      addVisible: false,
      editVisible: false,
      xqId: "",
      thirdInfo: {},
      TableAdmin: 'TableAdmin',
      butAdmin: 'butAdmin',
      TableButSave: 'butSave',
      TableButReset: 'butReset',
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, {name: "register"});
  },
  mounted() {
    let _this = this;
    // let userInfo = this.$store.state.userInfo;
    let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
    this.isShow(userInfo);
    this.imgUrl = this.$config.imgUrl;
    this.getThirdUseInfo();
    window.Event.$on("menuLeft", val => {
      _this.menuLeft = val;
      if (_this.menuLeft != "menuDeaDolour") {
        _this.TableAdmin = 'TableAdmin';
        _this.butAdmin = 'butAdmin';
        _this.TableButSave = 'TableButSave';
        _this.TableButReset = 'TableButReset';
      } else if (_this.menuLeft == "menuDeaDolour") {
        _this.TableAdmin = 'TableAdmin1';
        _this.butAdmin = 'butAdmin1';
        _this.TableButSave = 'TableButSave1';
        _this.TableButReset = 'TableButReset1';
      }
    });
    // _this.menuLeft1 = _this.$store.state.menuLeft;
    _this.menuLeft1 = sessionStorage.getItem('menuLeft')
    if (_this.menuLeft1 != "menuDeaDolour") {
      _this.TableAdmin = 'TableAdmin';
      _this.butAdmin = 'butAdmin';
      _this.TableButSave = 'TableButSave';
      _this.TableButReset = 'TableButReset';
    } else if (_this.menuLeft1 == "menuDeaDolour") {
      _this.TableAdmin = 'TableAdmin1';
      _this.butAdmin = 'butAdmin1';
      _this.TableButSave = 'TableButSave1';
      _this.TableButReset = 'TableButReset1';
    }
  },
  methods: {
    onPageChange(current, pageSize) {
      this.pagination.current = current;
      this.pagination.pageSize = pageSize;
      this.getThirdUseInfo();
    },
    // onPageChange(current, pageSize) {
    //   this.pagination.current = current;
    //   this.pagination.pageSize = pageSize;
    // },
    isShow(userInfo) {
      if (userInfo.permissions.includes("cf:app:appThird:add")) {
        this.addShow = true;
      }
      if (userInfo.permissions.includes("cf:app:appThird:remove")) {
        this.delShow = true;
      }
      if (userInfo.permissions.includes("cf:app:appThird:edit")) {
        this.editShow = true;
      }
    },
    onChange(pageNumber) {
      console.log("Page: ", pageNumber);
    },
    getThirdUseInfo() {
      let _this = this;
      _this.Loading = true;
      let pageNum = _this.pagination.current;
      let pageSize = _this.pagination.pageSize;
      api
          .getThirdUse(null, {pageNum: pageNum, pageSize: pageSize})
          .then(res => {
            _this.Loading = false;
            console.log(res);
            if (res.code == 200) {
              _this.pagination.total = res.data.totalCount;
              _this.data1 = res.data.data;
            }
          });
    },
    getInfo(xqId) {
      let _this = this;
      api.thirdGetInfo(null, xqId).then(res => {
        if (res.code == 200) {
          _this.thirdInfo = res.data;
          _this.icon = res.data.icon;
          _this.form.setFieldsValue({
            name: res.data.name,
            sortCode: res.data.sortCode,
            path: res.data.path,
            icon: _this.imgUrl + res.data.icon
          });
        }
      });
    },
    // 添加用户
    addThirdUse() {
      this.form.resetFields();
      this.addVisible = true;
    },
    closeAddThirdUse() {
      let _this = this;
      _this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          values.icon = _this.icon;
          values.sortCode = Number(values.sortCode);
          console.log("Received values of form: ", values);
          api.thirdAdd(null, values).then(res => {
            console.log(res);
            if (res.code == 200) {
              _this.$message.success("添加成功");
              // 关闭对话框
              _this.addVisible = false;
              // 重新执行一遍 在页面初始化加载时的语句，为了刷新数据
              this.getThirdUseInfo();
            } else {
              _this.$message.error("添加失败");
              // 关闭对话框
              _this.addVisible = false;
              // 重新执行一遍 在页面初始化加载时的语句，为了刷新数据
              this.getThirdUseInfo();
            }
          });
        }
      });
    },
    // 删除
    Delete(appId) {
      let _this = this;
      api.thirdRemove(null, appId).then(res => {
        if (res.code == 200 && res.data == true) {
          this.$message.success("删除成功");
          _this.getThirdUseInfo();
        } else {
          this.$message.error("删除失败");
          _this.getThirdUseInfo();
        }
      });
    },
    // 编辑
    edit(xqId) {
      this.editVisible = true;
      this.xqId = xqId;
      this.getInfo(xqId);
    },
    closeEditThirdUse() {
      let _this = this;
      _this.form.validateFieldsAndScroll((err, values) => {
        values.id = _this.xqId;
        if (_this.icon == "") {
          values.icon = _this.thirdInfo.icon;
        } else {
          values.icon = _this.icon;
        }
        values.sortCode = Number(values.sortCode);
        if (!err) {
          console.log("Received values of form: ", values);
          api.thirdEdit(null, values).then(res => {
            if (res.code == 200) {
              this.$message.success("编辑成功");
              // 关闭对话框
              _this.editVisible = false;
              // 重新执行一遍 在页面初始化加载时的语句，为了刷新数据
              this.getThirdUseInfo();
            } else {
              this.$message.error("编辑失败");
              // 关闭对话框
              _this.editVisible = false;
              // 重新执行一遍 在页面初始化加载时的语句，为了刷新数据
              this.getThirdUseInfo();
            }
          });
        }
      });
    },

    beforeUpload(file) {
      const isJpgOrPng =
          file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.error("只能上传jpeg、png的文件!");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("不能大于2MB!");
      }
      return isJpgOrPng && isLt2M;
    },
    // 上传图片
    uploadImage(file) {
      let _this = this;
      let formData = new FormData();
      formData.append("chunk", file.file);
      formData.append("hash", file.file.uid);
      formData.append("filename", file.file.name);
      uploadApi.uploadImage(null, formData).then(
          res => {
            console.log(res);
            if (res.code == 200) {
              _this.icon = res.data;
              _this.loading = false;
            }
          },
          err => {
            this.loading = false;
          }
      );
    },
    addReturnReset() {
      this.form.resetFields();
    }
  }
};
</script>

<style lang="scss" scoped>
.whole {
  position: relative;

  .Loading {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .crumbs {
    display: flex;
    padding-left: 31px;
    margin-top: 14px;

    a,
    area,
    button,
    [role="button"],
    input:not([type="range"]),
    label,
    select,
    summary,
    textarea,
    .ant-breadcrumb {
      font-family: MicrosoftYaHei;
      font-size: 18px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #4d4d4d;
    }

    .ant-breadcrumb > span:last-child a {
      font-family: MicrosoftYaHei;
      font-size: 18px;
      font-weight: normal;
      letter-spacing: 0px;
      color: #1e7eff;
    }
  }

  .jiange {
    display: inline-block;
    width: 10px;
  }

  .thirdUseTable {
    margin-left: 25px;
    min-height: 562px;
    width: 1560px;
    background: #ffffff;
    border: 1px solid #c4d7e1;
    border-radius: 6px;
  }

  .addThirdUse {
    width: 80%;
    display: flex;
    justify-content: flex-start;
    margin: 10px 0;
    margin-left: 30px;

    .userAbut {
      width: 120px;
      height: 36px;
      border-radius: 30px;
      background-color: #0078b5;
      font-size: 17px;
    }
  }

  .comaddThirdUse {
    position: absolute;
    left: 10%;
    top: 20px;
  }

  .aModalThirdUse,
  .aModalThirdUse1 {
    .butSave {
      width: 94px;
      height: 30px;
      border-radius: 30px;
      background-color: #0078b5;
      font-size: 16px;
      color: #fff;
      margin-right: 40px;
    }

    .butSave1 {
      width: 94px;
      height: 30px;
      border-radius: 30px;
      background-color: #238cc3;
      font-size: 16px;
      color: #fff;
      margin-right: 40px;
    }

    .butReset {
      width: 94px;
      height: 30px;
      border-radius: 30px;
      font-size: 16px;
      color: #0376b7;
      border: 1px solid #0376b7;
    }

    .butReset1 {
      width: 94px;
      height: 30px;
      border-radius: 30px;
      font-size: 16px;
      color: #238cc3;
      border: 1px solid #238cc3;
    }

    .addForm {
      min-width: 474px;
      border-radius: 8px;

      .avatar-uploader > .ant-upload {
        width: 128px;
        height: 128px;

        .uploadimage {
          width: 130px;
          height: 130px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
      }

      .ant-upload-select-picture-card i {
        font-size: 32px;
        color: #999;
      }

      .ant-upload-select-picture-card .ant-upload-text {
        margin-top: 8px;
        color: #666;
      }
    }
  }
}
</style>
<style>
.thirdUseTable {
  position: relative !important;
}

.aModalThirdUse .ant-form-item-label,
.aModalThirdUse1 .ant-form-item-label {
  display: flex !important;
  width: 74px !important;
  margin-left: 20px !important;
}

.aModalThirdUse .ant-input,
.aModalThirdUse1 .ant-input {
  width: 360px !important;
}

.aModalThirdUse .aFormItem.ant-row.ant-form-item,
.aModalThirdUse1 .aFormItem.ant-row.ant-form-item {
  height: 60px !important;
  margin-bottom: 0 !important;
}

.aModalThirdUse .has-error .ant-form-explain,
.has-error .ant-form-split,
.aModalThirdUse1 .has-error .ant-form-explain,
.has-error .ant-form-split {
  font-size: 14px !important;
}

.aModalThirdUse .ant-modal-body,
.aModalThirdUse1 .ant-modal-body {
  padding: 0 !important;
  padding-top: 20px !important;
}

.aModalThirdUse
.addForm.ant-form.ant-form-horizontal.ant-form-hide-required-mark,
.aModalThirdUse1
.addForm.ant-form.ant-form-horizontal.ant-form-hide-required-mark {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.aModalThirdUse .ant-modal-content,
.aModalThirdUse1 .ant-modal-content {
  width: 474px !important;
  box-shadow: 0px 0px 20px 0px rgba(0, 120, 182, 0.6) !important;
}
</style>
